<template>
  <el-form
    ref="form"
    label-position="top"
    v-bind="$attrs"
    :model="value_"
    :style="style_"
  >
    <ym-form-fields
      :fields="fields_"
      v-model="value_"
    />
    <ym-toolbar v-bind="toolbar_">
      <el-button v-if="submit_"
        @click="click"
      >
        提交
      </el-button>
    </ym-toolbar>
  </el-form>
</template>

<script>
import YmFormFields from './YmFormFields'
import YmToolbar from '../YmToolbar'
import { TOOLBAR, VALUE } from "@/store/elementui";
import {FIELDS, SUBMIT, WIDTH} from '@/store/form'

/**
 * props: {
 *    width: int,
 *    ?toolbar: toolbar
 *    fields: fields
 *    title: string
 * }
 */
export default {
  components: {
    YmToolbar,
    YmFormFields
  },
  data () {
    return {

    }
  },
  computed: {
    value_: {
      get () {
        return this[VALUE]
      },
      set (v) {
        this.$emit('input', v)
      }
    },
    fields_ () {
      return this[FIELDS]
    },
    toolbar_ () {
      return this[TOOLBAR]
    },
    submit_ () {
      return this[SUBMIT]
    },
    style_ () {
      const width = this[WIDTH]
      return (width) ? {
        width
      } : {}
    }
  },
  methods: {
    click () {
      if (!this[SUBMIT]) return
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          await this.$http.Post(this[SUBMIT], this.value)
          this.$emit('close')
        } else {
          return false
        }
      })
    }
  },
  props: {
    [WIDTH]: {
      type: String,
      default: undefined
    },
    [FIELDS]: {
      type: Array,
      default: () => []
    },
    [TOOLBAR]: {
      type: Object,
      default: () => ({})
    },
    [SUBMIT]: {
      type: String,
      default: null
    },
    [VALUE]: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

<style scoped>

</style>
